import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Button } from 'antd'
import { CloseOutlined } from '@ant-design/icons'
import style from './OriginClaim.module.less'

function Main ({ claim, visible, hide }) {
  const boxStyle = classnames(style.container, { [style.visible]: visible })
  const item = claim ? claim.items[0] || {} : {}
  return (
    <div className={boxStyle}>
      <div className={style['desc-box']}>
        {(item.desc || '').trim()}
      </div>
      <Button className={style['cancel-btn']} shape='circle' icon={<CloseOutlined />} onClick={hide} />
    </div>
  )
}

Main.propTypes = {
  claim: PropTypes.object,
  visible: PropTypes.bool,
  hide: PropTypes.func
}

Main.defaultProps = {
  claim: null,
  visible: false,
  hide: () => {}
}

export default Main
